{extend name="base" /}
{block name="css"}
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: "Microsoft Yahei";
    }

    h1 {
        width: 900px;
        margin: 40px auto;
        font: 32px "Microsoft Yahei";
        text-align: center;
        color: #fff;
    }

    .dowebok {
        width: 894px;
        height: 563px;
        margin: 0 auto;
        background-image: url('{__IMG__}/s3_bg.png');
    }

    .rotary {
        position: relative;
        float: left;
        width: 504px;
        height: 504px;
        margin: 20px 0 0 20px;
        background-image: url('{__IMG__}/g.png');
    }

    .hand {
        position: absolute;
        left: 144px;
        top: 144px;
        width: 216px;
        height: 216px;
        cursor: pointer;
    }

    .list {
        float: right;
        width: 300px;
        padding-top: 44px;
    }

    .list strong {
        position: relative;
        left: -45px;
        display: block;
        height: 65px;
        line-height: 65px;
        font-size: 32px;
        color: #ffe63c;
    }

    .list h4 {
        height: 45px;
        margin: 30px 0 10px;
        line-height: 45px;
        font-size: 24px;
        color: #fff;
    }

    .list ul {
        line-height: 36px;
        list-style-type: none;
        font-size: 12px;
        color: #fff;
    }

    .list span {
        display: inline-block;
        width: 94px;
    }
</style>
{/block}
{block name="body"}
{/block}
{block name="js"}
   </script> 

<h1 style="color: black">抽奖转盘</h1>
<div class="dowebok">
    <div class="rotary">
        <img class="hand" src="{__IMG__}/z.png" alt="">
    </div>
    <div class="list">
        <strong>100%中奖</strong>
        <h4>中奖用户名单</h4>
        <ul>
            {volist name="lottery" id="vo" empty="<strong>暂时没有评论</strong>"}
            <li>
                <span>{$vo.username}</span> <span style="font-size: 8px;">{$vo.content}</span>
            </li>
            {/volist}
        </ul>
    </div>
</div>

<script src="{__JS__}/js/jquery-1.8.3.min.js"></script>
<script src="{__JS__}/js/jquery.rotate.min.js"></script>

<script>
    $(function () {
        var count = {$count};
     if (count>=333) {                
         return layer.msg('今日抽奖次数已用完', {icon: 0});
         
     }else{
        var $hand = $('.hand');

        $hand.click(function () {
            var arr = '{$lotteryprize|raw|html_entity_decode}';
            arr = JSON.parse(arr);
            var data = Math.floor(Math.random() * arr.length);
            rotateFunc(data, arr[data]["uid"], arr[data]["content"]);
            var user_id = '{$user["id"]}';
            $.post('/lottery/add', {user_id:user_id,content:arr[data]["content"]}, function (res) {
                        if (res != 0) {
                            setTimeout(function () {
                                // location.reload();  // 页面刷新console.log(user_id);
                            }, 1500)
                        } else {
                            // location.reload();  // 页面刷新
                        }
                    }, 'json');
     
        });

        var rotateFunc = function (awards, angle, text) {
            $hand.stopRotates();
            $hand.rotate({
                angle: 0,
                duration: 5000,
                animateTo: angle + 1440,
                callback: function () {
        //layer.alert(text,{closeBtn: 0,shadeClose:true,title:''});
                    layer.msg(text,{time:3000,anim:6});
                   //alert(text);                            
                   //location.reload();  // 页面刷新
                            
                }
            });
        };
     }
    });
    
</script>
{include file="common/footer" /}
{/block}
</body>
</html>